<template>
  <div>
    <header id="introduction">
      <h1>Event Detail</h1>
    </header>

  <el-tabs type="border-card" class="detail-tabs">
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <span>Route</span>
        </span>
      </template>
        <div class="panel-container">
          <section class="panel">
              <h1>Radio Toggles</h1>
              <p>In this demo, <code>labels</code> for hidden <code>radios</code> toggle the content. This is based on the behavior in which clicked <code>labels</code> for a <code>radio</code> or <code>checkbox</code> input will check that <code>input</code>.</p>
              <pre>&lt;input id="radio-1" type="radio" name="demo-radios"&gt;
&lt;input id="radio-2" type="radio" name="demo-radios"&gt;</pre>
              #radio-1: <input id="radio-1" type="radio" name="demo-radios"> #radio-2: <input id="radio-2" type="radio" name="demo-radios">
              <pre>&lt;label for="radio-1"&gt;Toggle #radio-1&lt;/label&gt;
&lt;label for="radio-2"&gt;Toggle #radio-2&lt;/label&gt;</pre>
              <label for="radio-1" class="demo-label">Toggle #radio-1</label>
              <label for="radio-2" class="demo-label">Toggle #radio-2</label>
              <p>Click one of the labels above and see its effect on the radios above it.</p>
              <p>The radios for this pen's tabs are displayed semi-transparently at the top of this demo page.</p>
          </section>
        </div>
    </el-tab-pane>
    <el-tab-pane label="Config">
      <template #label>
        <span class="custom-tabs-label">
          <span>Config</span>
          </span>
      </template>
        <div class="panel-container">
        </div>
    </el-tab-pane>
    <el-tab-pane label="Role">
      <template #label>
        <span class="custom-tabs-label">
          <span>Role</span>
        </span>
        </template>
      <div class="panel-container">
      </div>
    </el-tab-pane>
    <DetailCard :tag="data.tag" :title="data.title" :content="data.content"></DetailCard>
  </el-tabs>
  </div>
</template>
<script setup>
import DetailCard from './CommonDetialCard.vue'
const data = {
  tag: "detail",
  title: "Event Detail",
  content:"In this demo, <code>labels</code> for hidden <code>radios</code> toggle the content. This is based on ",

}
</script>
<style scoped lang="scss">
$tab-count: 5;
$menu-item-height: 46px;

$color-primary-light: #e74c3c;
$color-primary-dark: #c0392b;
$color-text: #444444;

$color-border: #dfdfdf;
$color-border-top: $color-primary-dark;

$color-label-bg-inactive: #ecf0f1;
$color-label-bg-active: white;
$color-label-active: $color-border-top;
$color-label-inactive: #bdc3c7;
$main-padding: 48px 24px;
$tab-transition-duration: 200ms;
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;

}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.custom-tabs-label{
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit;
  &:hover{
    color: inherit;
  }
  &:active{
    color: inherit;
  }
}

#introduction {
  width: 90%;
  margin: 0 auto;
  padding: $main-padding;
  color: white;
  h1 {
    font-weight: 300;
    text-align: center;
  }
}
:deep(.el-tabs__nav-scroll){
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-tabs__item){
  position: relative;
  width: 200px;
  height: 60px;
  &:after{
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 0;
    height: 0;
    transition: 0.3s ease-out;
    background-color: $color-border-top;
  }
  &:hover:after{
    height: 4px;
  }
}
:deep(.is-active){
  &:after{
    height: 4px;
  }
}
.panel-container{
  padding-top: 3vh;
  min-height: 53vh;
  display: flex;
  justify-content: center;
}
.panel{

}
h1{
  font-size: 2em;
  font-weight: 300;
  margin: .67em 0;
  color: #c0392b;
}
p{
  line-height: 1.8;
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
}
pre{
  padding: 12px;
  line-height: 1.6;
}
code, pre {
  color: #c0392b;
  background-color: #ecf0f1;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
}
label {
  background-color: #c0392b;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  margin: 0.5rem;
}
</style>